﻿<div>
	<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
			<a class="navbar-brand" href="#">
				<i class="fa fa-home"></i>
				<span>Durandal</span>
			</a>
		</div>

		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav" data-bind="foreach: router.navigationModel">
				<li data-bind="css: { active: isActive }">
					<a data-bind="attr: { href: hash }, text: title"></a>
				</li>
			</ul>

			<ul class="nav navbar-nav navbar-right">
				<li class="loader" data-bind="css: { active: router.isNavigating }">
					<i class="fa fa-spinner fa-spin fa-2x"></i>
				</li>
			</ul>
			<form class="navbar-form navbar-right">
				<div class="form-group">
					<label for="language" class="col-form-label">选择语言</label>
					<select class="form-control" id="language" data-bind="value: selectedLang">
						<option value="zh-cn">简体中文</option>
						<option value="zh-tw">繁體中文</option>
						<option value="ja-jp">日本語</option>
						<option value="en-us">English</option>
					</select>
				</div>
			</form>
		</div>
	</nav>

	<div class="page-host" data-bind="router: {}"></div>
</div>